<template>
  <div class="persapp">
    <div id="container" ref="myref"></div>
    <main style="position: absolute;">
      <el-input v-model="input1" class="w-50 m-2" placeholder="输入身份证号" :prefix-icon="Calendar" />
      <el-date-picker v-model="value1" type="date" placeholder="选择日期" size="default" />
      <el-button type="primary" class="btn" @click="search">
        <img src="@/assets/Icons/png/SearchWhite.png"  />搜索
      </el-button>
    </main>

    <el-card v-if="flag" class="box-card">
      <template #header>
        <div class="cardheader">
          <div class="lefthewder">
            <div>
              <img src="@/assets/Icons/png/Image/User.png"  />
            </div>
            <div>
              <p>{{ name }}</p>
              <p class="p2">{{ pathinfo? pathinfo[0].idcard : ""}}</p>
            </div>
          </div>
          <div class="righthearder">
            {{ pathinfo ? pathinfo[0].route.routeTime : ""}}行程
            <span
              class="p2"
            >{{ pathinfo ? pathinfo[0].route.list.length : ""}}</span>
          </div>
        </div>
      </template>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item
          v-for="(v,i) in pathinfo ? pathinfo[0].route.list : ''"
          :key="i"
          :name="(i+1)+''"
        >
          <template #title>
            <div class="cardmain">
              <h4>
                {{ v.start }}
                <el-icon>
                  <Right />
                </el-icon>
                {{ v.end }} {{ v.type }}{{ v.trainNum }}
              </h4>
              <div>{{ v.createTime }} 至 {{ v.endTime }}</div>
            </div>
          </template>
          <div class="mainmian">
            <div class="mainheader">
              <div class="mainheaderleft">
                <p>{{ pathinfo ? pathinfo[0].route.routeTime : ""}}{{ v.weekday }}</p>
                <h2>{{ v.createtime }}</h2>
                <p>
                  {{ v.start }}
                  <img src="@/assets/Icons/png/地标.png"  />
                </p>
              </div>
              <div class="mainheadercenter">
                <p>经停信息</p>
                <p>{{ v.type }}{{ v.trainNum }}</p>
              </div>
              <div class="mainheaderright">
                <p>{{ pathinfo ? pathinfo[0].route.routeTime : ""}}{{ v.weekday }}</p>
                <h2>{{ v.endtime }}</h2>
                <p>
                  <img src="@/assets/Icons/png/地标.png"  />
                  {{ v.end }}
                </p>
              </div>
            </div>
            <div class="mainmainer">
              <div class="mainmainerleft">
                <h4>{{ name }}</h4>
                <p>身份证{{ pathinfo? pathinfo[0].idcard : ""}}</p>
              </div>
              <div class="mainmainerright">
                <p>
                  {{ v.seatType }}
                  <span>￥{{ v.price }}.0</span>
                </p>
                <div>
                  <img src="@/assets/Icons/png/Tag/靠窗.png"  />
                  <p>0{{ v.chenum }}车厢{{ v.seatnum }}号</p>
                </div>
              </div>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Calendar } from "@element-plus/icons-vue";
import { Right } from "@element-plus/icons-vue";

const value1 = ref("");
const input1 = ref("");
const activeNames = ref();
let flag = ref(false);
let pathinfo = ref();
let name = ref("");


onMounted(() => {
  name.value = 'admin';
  pathinfo.value=[
            {
                userid: 1,
                idcard: "141030200203130013",
                route:{
                    routeTime: "2022-10-10",
                    list:[
                        {
                            start:"北京西",
                            end:"武汉",
                            type:"G",
                            trainNum: 71,
                            createTime: "2023-05-10  07:05",
                            createtime:"07:05",
                            endTime: "2023-05-10  11:01",
                            endtime:"11:01",
                            weekday: "周二",
                            seatType:"一等座",
                            price: 120,
                            chenum: 3,
                            seatnum: "16A",
                            kao:"靠窗",
                            startLng:[116.404, 39.928],
                            endLng:[114.31159, 30.59847]
                        },
                        {
                            start:"武汉",
                            end:"太原南站",
                            type:"G",
                            trainNum: 681,
                            createTime: "2023-05-10  13:46",
                            createtime:"13:46",
                            endTime: "2023-05-10  17:41",
                            endtime:"17:41",
                            weekday: "周二",
                            seatType:"一等座",
                            price: 240,
                            chenum: 6,
                            seatnum: "18F",
                            kao:"靠窗",
                            startLng:[114.31159, 30.59847],
                            endLng:[112.61599 , 37.79633]
                        }
                    ]
                }
            }
        ]
  initMap();
});

// 地图初始化-----线路规划
const initMap = (startlng?: any, endlng?: any) => {
  let myBmp = (<any>window).BMap
  var map = new myBmp.Map("container"); // 创建Map实例
  map.centerAndZoom(new myBmp.Point(116.404, 39.915), 12); // 初始化地图,设置中心点坐标和地图级别
  map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
  var scaleCtrl = new myBmp.ScaleControl(); // 添加比例尺控件
  map.addControl(scaleCtrl);
  // var zoomCtrl = new myBmp.ZoomControl(); // 添加缩放控件
  // map.addControl(zoomCtrl);
  // 线路规划
  console.log(startlng,endlng);
  var start = new myBmp.Point(...(startlng ? startlng : []));
  var end = new myBmp.Point(...(endlng ? endlng : []));
  var driving = new myBmp.DrivingRoute(map, {
    renderOptions: { map: map, autoViewport: true }
  });
  driving.search(start, end);
};

// 搜索
const search = () => {
  console.log(value1.value,input1.value)
  flag.value = true;
};

// 行程切换
const handleChange = (val:any) => {
  if(val[0] == 1){
      initMap(pathinfo.value[0].route.list[0].startLng, pathinfo.value[0].route.list[0].endLng);  
  }else if(val[0] == 2){
   
      initMap(pathinfo.value[0].route.list[1].startLng, pathinfo.value[0].route.list[1].endLng);
    };
  }
</script>

<style scoped lang="scss">
.persapp {
  width: calc(100% - 20px);
  height: calc(100vh - 70px);
  background-color: #ccc;
  margin-left: 10px;
  border: 1px solid #ccc;
  position: relative;
}
#container{width: 100%;height:100%}

main {
  position: absolute;
  left: 30px;
  top: 30px;
  display: flex;
  z-index: 999;
}
.el-input {
  width: 160px;
  margin-right: 20px;
}
.btn {
  width: 80px;
  margin-left: 20px;
  img {
    width: 30px;
  }
}

.box-card {
  width: 460px;
  position: absolute;
  z-index: 666;
  left: 30px;
  top: 70px;
  .cardheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    .lefthewder {
      display: flex;
      img {
        width: 45px;
        margin-right: 15px;
      }
    }
    .righthearder {
      margin-top: 30px;
      font-size: 13px;
    }
  }
}
.p2 {
  color: rgb(37, 171, 171);
  font-size: 13px;
  margin-top: 5px;
}
.cardmain {
  h4 {
    margin-bottom: -25px;
  }
}

.mainmian{
  background: rgb(250, 236, 238);
  border-radius: 5px;
}
.mainheader {
  display: flex;
  padding: 0px 10px;
  justify-content: space-between;
  height: 90px;
  border-bottom: 1px solid #ccc;
  text-align: center;
  .mainheaderleft,
  .mainheaderright {
    p :first-child {
      line-height: 10px;
    }
    h2 {
      font-size: 25px;
      margin: -5px 0;
    }
    img {
      width: 20px;
      margin-top: -10px;
    }
  }
  .mainheadercenter {
    p:first-child {
      width: 80px;
      height: 25px;
      font-size: 10px;
      line-height: 23px;
      border: 1px solid rgb(222, 222, 222);
      border-radius: 20px;
      color: rgb(108, 108, 108);
      margin-top: 20px;
    }
  }
}
.mainmainer {
  display: flex;
  justify-content: space-between;
  padding: 5px 10px;
  .mainmainerright {
    p {
      span {
        color: rgb(248, 112, 0);
      }
    }
    div {
      display: flex;
      img {
        width: 40px;
        margin-right: 5px;
      }
    }
  }
}

</style>
